import React from 'react'
import { } from 'antd'
import update from 'immutability-helper';
import { UpCircleOutlined, DownCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'
import { CloseCircleFilled } from "@ant-design/icons";
import './index.less'
const SelectOperation = (props) => {
    const { children, data, dataIndex, edit } = props
    const { selectIndex, list } = data
    const sortTop = () => {
        const dragRow = Object.assign(list[selectIndex])
        const dragRow1 = Object.assign(list[selectIndex - 1])
        edit({
            selectIndex: selectIndex - 1,
            list: list.map((val, o) => {
                if (o === selectIndex) {
                    return dragRow1
                } else if (o === (selectIndex - 1)) {
                    return dragRow
                }
                return val
            })
        })
    }
    const sortBottom = () => {
        const dragRow = Object.assign(list[selectIndex])
        const dragRow1 = Object.assign(list[selectIndex + 1])
        edit({
            selectIndex: selectIndex + 1,
            list: list.map((val, o) => {
                if (o === selectIndex) {
                    return dragRow1
                } else if (o === (selectIndex + 1)) {
                    return dragRow
                }
                return val
            })
        })
    }
    const sortDelete = () => {
        let sy = null
        edit({
            selectIndex: sy,
            list: list.filter((item, index) => {
                if (index === selectIndex) {
                    if (index > 0) {
                        sy = index - 1
                    } else {


                    }
                    return false
                }
                else {
                    sy = selectIndex - 1
                    return true
                }

            }),

        })
    }
    const renderOperation = () => {
        if (dataIndex === 0) {
            return <div onClick={(e) => {
                e.stopPropagation()
            }} className='edit-operate-move'>
                {list.length > 1 && <div className='move-item'>
                    <DownCircleOutlined onClick={() => { sortBottom() }}></DownCircleOutlined>
                </div>}
                <div className='move-item'>
                    <CloseCircleOutlined onClick={() => { sortDelete() }}></CloseCircleOutlined>
                </div>
            </div>
        }
        else if (dataIndex === list.length - 1) {
            return <div onClick={(e) => {
                e.stopPropagation()
            }} className='edit-operate-move'>
                {list.length > 1 && <div className='move-item'>
                    <UpCircleOutlined onClick={() => { sortTop() }}></UpCircleOutlined>
                </div>}
                <div className='move-item'>
                    <CloseCircleOutlined onClick={() => { sortDelete() }}></CloseCircleOutlined>
                </div>
            </div>
        } else {
            return <div onClick={(e) => {
                e.stopPropagation()
            }} className='edit-operate-move'>
                <div className='move-item'>
                    <UpCircleOutlined onClick={() => { sortTop() }}></UpCircleOutlined>
                </div>
                <div className='move-item'>
                    <DownCircleOutlined onClick={() => { sortBottom() }}></DownCircleOutlined>
                </div>
                <div className='move-item'>
                    <CloseCircleOutlined onClick={() => { sortDelete() }}></CloseCircleOutlined>
                </div>
            </div>
        }
    }
    const handleDelete = (e) => {
        e.stopPropagation()
        let sy = null
        edit({
            selectIndex: sy,
            list: list.filter((item, index) => {
                if (index === selectIndex) {
                    if (index > 0) {
                        sy = index - 1
                    } else {
                        sy = null
                    }
                    return false
                }
                else {
                    sy = selectIndex - 1
                    return true
                }

            }),
            active: sy ? 'components' : 'all'
        })
    };

    return <div className='main-field' onClick={(e) => {
        e.stopPropagation()
        console.log('编辑----index', dataIndex)
        edit({
            selectIndex: dataIndex,
        })
    }}
        style={selectIndex === dataIndex ? {
            border: "1px solid rgba(28,133,252,1)",
            background: "F8FBFF",
            position: "relative"
        } : { position: "relative" }}
    >
        {children}
        {/* {selectIndex === dataIndex ? renderOperation() : ''} */}
        <CloseCircleFilled
            className="main-field-delete"
            style={{
                display: selectIndex === dataIndex ? "block" : 'none',
                fontSize: '18px',
                position: 'absolute',
                top: '2px',
                right: '2px',
                color: '#448aff',
                cursor: 'pointer'

            }}
            onClick={(e) => {
                e.stopPropagation()
                handleDelete(e)
            }}
        />
    </div>
}
export default SelectOperation